import React,{Component} from 'react';
import {Link,NavLink} from "react-router-dom";
import { Carousel, Row, Col, Card,Badge, Rate, Tag } from 'antd';
//全局导入axios
import $http from 'axios'
class Home extends Component{
	constructor(){
		super();
		this.state={
		  title:"首页",
		  slides:[],
	      newList:[],
	      happyList:[],
	      loveList:[]
		};
	}

	
  componentWillMount(){ 
    
     $http.get('/mock/carousel.json').then((res)=>{
      
      this.setState({
        slides:res.data.subjects
      });

    })


    var url1="/mock/movie/index_new.json";
    $http.get(url1).then((res)=>{
    
      this.setState({
        newList:res.data.subjects
      }); 

    }).then(()=>{
        var url2="/mock/movie/index_happy.json";
        $http.get(url2).then((res)=>{
          this.setState({
            happyList:res.data.subjects
          }); 
          console.log(this.state.happyList);
        })
    })


  }

  //如果图片加载失败,设置默认图片
  setDefaultImg(dom,index){
      this.refs[dom+index].src="/images/default.jpg";
  }  

  render() {
    return (
      <div>

        {/*轮播图*/}
        <div>
            <Carousel autoplay>
              {this.state.slides.map((item,index)=>{
                  return <div key={index}>
                      <Link to={item.href} title={item.title}>
						<img src={item.src} alt={item.title} style={{width:'100%'}}/>					
                      </Link>
                  </div>
              })}
            </Carousel>
        </div>
        
        {/*最新上映*/} 
        <div className="container" style={{marginBottom:40}}> 
            <div style={{position:'relative',borderBottom:'1px solid #DDD',marginBottom:40}}>
            <h3 style={{textAlign:'center',fontSize:26,fontWeight:700}}>最新上映</h3>
            </div>
            <Row gutter={16}>
              {this.state.newList.map((item,index)=>{
                    if(index<18){
                      return  <Col key={index} className="gutter-row" span={4}>
                        
							<div className="movie-box" style={{marginBottom:20,backgroundColor:'#F2F2F2'}}>
	                            <Link to={'/movie/'+item.id} title={item.title}>
	                            <img ref={'new_img_'+index} onError={this.setDefaultImg.bind(this,'new_img_',index)} src={item.images.medium} alt={item.alt} style={{height:240,width:'100%'}}/>
	                            <div>
		                            <span style={{fontWeight:700}}>{item.title}</span>
		                            <br/>
		                            年代：<Tag>{item.year}</Tag><br/>
									 <Rate count={10} disabled defaultValue={item.rating.average} />
		                            {/*豆瓣评分：<Badge count={90} style={{ backgroundColor: '#CCC' }} />*/}		
	                            </div>
								</Link>	
	                        </div>	
                        
                      </Col>
                    }
                })}
          </Row>
        </div>    

        {/*喜剧*/}
        {/*
         <div className="container" style={{marginBottom:40}}> 
            <div style={{position:'relative',borderBottom:'1px solid #DDD',marginBottom:40}}>
            <h3 style={{textAlign:'center',fontSize:26,fontWeight:700}}>喜剧</h3>
            </div>
            <Row gutter={16}>
              {this.state.happyList.map((item,index)=>{
                    if(index<18){
                      return <Col key={index} className="gutter-row" span={4}>
                        <div className="movie-box">
                            <Link to={'/movie/'+item.id}>  
                              <img ref={'happy_img_'+index} onError={this.setDefaultImg.bind(this,'happy_img_',index)} src={item.images.medium} alt={item.alt} style={{height:240,width:'100%'}}/>
                            <div>
                              <span style={{fontWeight:700}}>{item.title}</span><br/>
                              年代：<Tag>{item.year}</Tag><br/>
                 <Rate count={10} disabled defaultValue={item.rating.average} /> 
                            </div>
                            </Link>
                        </div>
                      </Col>
                    }
                })}
          </Row>
        </div>  
        */}   



      </div>
    );
  }


}

export default Home;